<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	const orderDetails = ref([
		{
			domain: 'www.baidu.com',
			serialNumber: '123456',
			duration: '1年',
			type: '域名',
			subtotal: '100',
			unitPrice: '100',
			status: '待支付',
		}, {
			domain: 'www.baidu.com',
			serialNumber: '123456',
			duration: '1年',
			type: '域名',
			subtotal: '100',
			unitPrice: '100',
			status: '待支付',
		}, {
			domain: 'www.baidu.com',
			serialNumber: '123456',
			duration: '1年',
			type: '域名',
			subtotal: '100',
			unitPrice: '100',
			status: '待支付',
		}, {
			domain: 'www.baidu.com',
			serialNumber: '123456',
			duration: '1年',
			type: '域名',
			subtotal: '100',
			unitPrice: '100',
			status: '待支付',
		}, {
			domain: 'www.baidu.com',
			serialNumber: '123456',
			duration: '1年',
			type: '域名',
			subtotal: '100',
			unitPrice: '100',
			status: '待支付',
		}, {
			domain: 'www.baidu.com',
			serialNumber: '123456',
			duration: '1年',
			type: '域名',
			subtotal: '100',
			unitPrice: '100',
			status: '待支付',
		}, {
			domain: 'www.baidu.com',
			serialNumber: '123456',
			duration: '1年',
			type: '域名',
			subtotal: '100',
			unitPrice: '100',
			status: '待支付',
		}, {
			domain: 'www.baidu.com',
			serialNumber: '123456',
			duration: '1年',
			type: '域名',
			subtotal: '100',
			unitPrice: '100',
			status: '待支付',
		}, {
			domain: 'www.baidu.com',
			serialNumber: '123456',
			duration: '1年',
			type: '域名',
			subtotal: '100',
			unitPrice: '100',
			status: '待支付',
		}, {
			domain: 'www.baidu.com',
			serialNumber: '123456',
			duration: '1年',
			type: '域名',
			subtotal: '100',
			unitPrice: '100',
			status: '待支付',
		}
	])

	const openDialog = () => {
		ElMessageBox.confirm(
			'<span style="color: #ff0000;">域名价格可能会有所变化，且该域名可能无法再次购买。</span> <span style="color: #999999;">确认取消订单吗？</span>',
			'您即将关闭此订单',
			{
				confirmButtonText: '再想想',
				cancelButtonText: '取消订单',
				type: 'warning',
				dangerouslyUseHTMLString: true,
			}
		)
			.then(() => {
				console.log('111111')
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '取消提交',
				})
			})
	}
	const countdown = ref(Date.now() + 1000 * 60 * 60 * 7)
	const stepValue = ref(3)

	import { useRoute, useRouter } from 'vue-router'
	const route = useRoute()
	const router = useRouter()
	const status = ref('')

	onMounted(() => {
		status.value = route.query.status as string || ''
		if (status.value === '处理中') {

		}
	})
	const handleBack = () => {
		router.push('/my-order')
	}
</script>
<template>
	<div class="container">
		<div class="page-title">我的订单</div>
		<div class="bs-panel">
			<el-row class="account-menu-list">
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(0)">
						<img src="../../assets/images/f-icon-1.png" alt="">
						<span>全部订单</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(1)">
						<img src="../../assets/images/f-icon-2.png" alt="">
						<span>待付款</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(2)">
						<img src="../../assets/images/f-icon-3.png" alt="">
						<span>处理中</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(3)">
						<img src="../../assets/images/f-icon-4.png" alt="">
						<span>已完成</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="bs-panel">
			<div class="bs-panel-body">
				<div class="bs-panel_hd">
					<div class="bs-panel_left">
						<div class="bs-panel_tt bold">订单列表</div>
						<div class="bs-panel_desc">订单号2411281753417353</div>
					</div>
					<div class="bs-panel_right" @click="handleBack">
						<el-link type="info">返回订单列表</el-link>
					</div>
				</div>
				<div style="padding: 30px 100px;">
					<div class="page-steps">
						<div class="step-item" :class="{ 'active': stepValue >= 1 }">
							<div class="step-flex">
								<div class="step-item-title">1</div>
								<div class="step-item-desc">创建订单</div>
							</div>
							<div class="step-time">2024-11-18 09:37:35</div>
						</div>
						<div class="step-item" :class="{ 'active': stepValue >= 2 }">
							<div class="step-flex">
								<div class="step-item-title">2</div>
								<div class="step-item-desc">付款到190</div>
							</div>
							<div class="step-time">2024-11-18 09:37:35</div>
						</div>
						<div class="step-item" :class="{ 'active': stepValue >= 3 }">
							<div class="step-flex">
								<div class="step-item-title">3</div>
								<div class="step-item-desc">处理订单</div>
							</div>
							<div class="step-time"></div>
						</div>
						<div class="step-item" :class="{ 'active': stepValue >= 4 }">
							<div class="step-flex">
								<div class="step-item-title">4</div>
								<div class="step-item-desc">订单完成</div>
							</div>
							<div class="step-time"></div>
						</div>
					</div>
					<el-row :gutter="20">
						<el-col :span="14">
							<div class="status-panel" :class="{ 'status-panel-success': status === '已完成' }">
								<div class="status-panel_head">
									<div class="status-tit">
										<el-icon color="#4B9E52" size="26" v-if="status === '已完成'">
											<SuccessFilled />
										</el-icon>
										<el-icon color="#ef813e" size="26" v-else-if="status === '待付款'">
											<WarningFilled />
										</el-icon>
										<el-icon color="#000" size="26" v-else-if="status === '处理中'">
											<Loading />
										</el-icon>
										<span>订单状态:{{ status }}</span>
									</div>
									<el-link type="info">取消订单</el-link>
								</div>
								<div class="status-panel_body">
									<div class="status-panel_content">
										<div class="status-tit">请注意</div>
										<div class="status-label" v-if="status === '待付款'">
											您还有 <el-countdown title=" "
												value-style="color: #ff0000; font-size: 14px; padding:0 6px"
												:value="countdown" /> 秒可以完成付款，超时后订单将自动关闭。请及时处理。
										</div>
										<div class="status-label" v-else-if="status === '处理中'">
											您的订单正在处理中，我们会尽快为您完成操作。感谢您的耐心等待！
										</div>
										<div class="status-label" v-else-if="status === '已完成'">
											您的订单已成功完成！感谢您的支持，如需进一步帮助，请随时联系我们。
										</div>
									</div>
								</div>
								<div class="status-panel_foot" v-if="status != '已完成'">
									<el-button type="primary" size="large">立即付款</el-button>
								</div>
							</div>
						</el-col>
						<el-col :span="10">
							<div class="orders-panel">
								<div class="bs-panel_hd">
									<div class="bs-panel_tt bold">订单金额</div>
								</div>
								<div class="order-preview">
									<div class="order-preview_item order-preview_item_total">
										<span class="preview_item_tt">订单总价：</span>
										<span class="preview_item_value">¥ 470</span>
									</div>
									<div class="order-preview_item">
										<span class="preview_item_tt">优惠金额：</span>
										<span class="preview_item_value">¥ 3</span>
									</div>
									<div class="order-preview_item">
										<span class="preview_item_tt">未使用优惠券</span>
										<span class="preview_item_value">¥ 2</span>
									</div>
								</div>
								<div class="total-foot">
									<span class="total-foot_value">¥ 470</span>
								</div>
							</div>
						</el-col>
					</el-row>
					<div class="detail-panel">
						<div class="bs-panel_hd">
							<div class="bs-panel_tt bold">商品明细</div>
						</div>
						<el-table :data="orderDetails" style="width: 100%">
							<el-table-column prop="serialNumber" label="序号" align="center" />
							<el-table-column prop="domain" label="域名" align="center" />
							<el-table-column prop="duration" label="时长" align="center" />
							<el-table-column prop="type" label="类型" align="center" />
							<el-table-column prop="subtotal" label="小计" align="center" />
							<el-table-column prop="unitPrice" label="单价" align="center" />
							<el-table-column prop="status" label="状态" align="center" />
						</el-table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<style scoped lang='scss'>
	.step-flex {
		display: flex;
		align-items: center;
	}

	.status-tit {
		display: flex;
		align-items: center;

		span {
			margin-left: 10px;
		}
	}

	.status-label {
		display: flex;
		flex-wrap: wrap;
		line-height: 28px;
		color: #888;

		::v-deep .el-statistic {
			height: 26px;
			line-height: 26px;
		}

		::v-deep .el-statistic__head {
			display: none;
		}
	}

	.status-panel_content {
		.status-tit {
			font-weight: bold;
			margin-bottom: 10px;
		}
	}

	.status-panel_foot {
		text-align: center;
		margin-top: 20px;

		.el-button {
			width: 200px;
		}
	}

	.status-panel_head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;

		.status-tit {
			font-weight: bold;
		}

		.status-cancel {
			color: #ef813e;
		}

	}

	.status-panel_body {
		padding: 15px 20px;
		background-color: rgba(255, 255, 255, 1);
		box-sizing: border-box;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(228, 228, 231, 1);
		border-radius: 10px;

	}



	.status-panel {
		height: 220px;
		background: inherit;
		background-color: rgba(230, 143, 54, 0.14901960784313725);
		box-sizing: border-box;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(228, 228, 231, 1);
		border-radius: 10px;
		padding: 20px;
	}

	.status-panel-success {
		background-color: rgba(137, 236, 62, 0.14901960784313725);
		box-sizing: border-box;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(228, 228, 231, 1);
	}


	.orders-panel {
		height: 220px;
		padding: 20px;
		background-color: rgba(255, 255, 255, 1);
		box-sizing: border-box;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(228, 228, 231, 1);
		border-radius: 10px;

		.order-preview_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;
			color: #999;
		}

		.order-preview_item_total {
			color: #000;
		}

		.total-foot {
			text-align: right;
			border-top: 1px solid rgba(228, 228, 231, 1);
			padding-top: 10px;
			padding-bottom: 10px;
			margin-top: 10px;
			color: #ef813e;
			font-size: 24px;
		}
	}

	.detail-panel {
		background-color: rgba(255, 255, 255, 1);
		box-sizing: border-box;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(228, 228, 231, 1);
		border-radius: 10px;
		padding: 10px;
		margin-top: 20px;

		.bs-panel_hd {
			padding: 0 10px;
		}
	}

	.price-value {
		color: #ef813e;
		font-size: 16px;
	}

	.w-1 {
		width: 322px;
		text-align: center;
	}

	.w-2,
	.w-3 {
		width: 142px;
		text-align: center;
	}

	.w-4,
	.w-5,
	.w-6 {
		width: 200px;
		text-align: center;
	}

	.w-1-1 {
		width: 156px;
		text-align: center;
	}


	.page-steps {
		display: flex;
		justify-content: center;
		margin-bottom: 30px;

		.step-item {
			position: relative;
			padding-right: 100px;
			color: #999;
			margin: 0 10px;

			&:last-child {
				padding-right: 0;
			}

			&::before {
				content: '';
				position: absolute;
				top: 32%;
				left: 100px;
				width: 130px;
				height: 1px;
				background-color: #d3d7dc;
			}

			&:last-child::before {
				display: none;
			}

			.step-time {
				width: 120px;
				height: 20px;
				color: #999;
				font-size: 12px;
			}

			.step-item-title {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 26px;
				height: 26px;
				border: 1px solid #d3d7dc;
				color: #d3d7dc;
				border-radius: 50%;
				margin-right: 6px;
			}
		}

		.step-item.active {
			color: #e68f36;

			&::before {
				background-color: #e68f36;
			}

			.step-item-title {
				border-color: #e68f36;
				background-color: #e68f36;
				color: #fff;
			}
		}
	}

	.account-menu {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 85px;
		cursor: pointer;
		font-size: 16px;
		transition: all 0.3s;
	}

	.account-menu:hover {
		box-shadow: rgb(230, 143, 54) -1px 1px 10px;

	}

	.account-menu::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 1px;
		height: 100%;
		background-color: #d3d7dc;
	}

	.account-menu-list .el-col:last-child .account-menu::before {
		display: none;
	}

	.account-menu img {
		width: 42px;
		height: 42px;
		margin-right: 35px;
	}
</style>